<template>
	<view class="content">
<view class="status-contents">
			<view class="status top-view"></view>
		</view>
		<!-- 页面标题 -->
		<!-- #ifdef APP-PLUS -->
		<view class="title-box" @click="back">
			<uni-icon class="icon" type="arrowleft" size="28" color="#333"></uni-icon>
			<text class="title" >赠送积分</text>
		</view>
		<!-- #endif -->
		
		<!-- 中间部分 -->
		<view class="buy-box">
			<view class="pay-method">
				<text class="num">赠送数量</text>
				<input class="num_" v-model="credit" placeholder="请输入赠送的积分数量"/>
			</view>
			<view class="buy-count">
				<text class="num">赠送到</text>
				<input class="num_" v-model="obj_phone" placeholder="请输入收取积分的账户手机号" @blur="blurPhone" placeholder-style="font-size:26upx"/>
			</view>
			<view class="need-money">
				<text class="need">消费金额</text>
				<view class="input-box">
					<text class="symbol">￥</text>
					<input type="text" v-model="info" placeholder="0"/>
				</view>
			</view>
			<text class="more">本次最多可赠送100000积分</text>
		
		</view>
		<view class="confirm-btn" @click="give()">
			<text>确认赠送</text>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import eonfox from '@/components/eonfox/eonfox.js';
	import fns from '@/components/eonfox/fns.js';
	var ef=new eonfox()
	export default {
		data() {
			return {
				credit:'',//赠送数量
				obj_phone:'',//对方手机号
				info:'',//消费金额
				mch_id:'',
				switch_key:false,
				nick:'',
				pphone:''
			};
		},
		components:{
			uniIcon	,
			eonfox,
			fns
		},
		onLoad() {
			var _this=this;
			//获取商家id
			ef.submit({
				request:{s:['MERCHANTSELF']},
				callback:function(data){
					var fns_=fns.checkError(data,'s',function(){
						uni.showToast({
							title:'商家信息获取失败',
							icon:'none'
						})
					})
					console.log('fns',fns_);
					_this.mch_id=fns_.s[0].id
				}
			})
			
		},
		methods: {
			blurPhone(e){
				var that=this;
				that.pphone=e.target.value;
				ef.submit({
					request: {
						s: ['USERPHONEGET',[{phone:that.pphone}]]
					},
					callback: function(data){
						console.log('参数',data)
						if(fns.checkError(data,'s',function(errno,error){
							uni.showToast({
								title:error,
								icon:'none'
							})
						}));
						var list=data.data.s;
						if(list){
							that.nick=list.data.nick;
						}
						if(that.nick==""){
							that.nick="该用户未设置昵称"
						}
						
						uni.showModal({
							title: '用户昵称',
							content:that.nick,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
							});
						},
					error: function(err){
					         console.log("出错啦", err);
					}
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			give() {
				var	_this=this;
				if(_this.switch_key){
					uni.showToast({
						title:'请不要重复操作',
						icon:'none'
					})
					return;
				}
				if(!/^\d*\.{0,1}\d{0,1}$/.test(_this.credit)||_this.credit<=0){
					uni.showToast({
						title:'积分数量不合法',
						icon:'none'
					})
					return;
				}
				if(_this.obj_phone.length!=11){
					uni.showToast({
						title:'手机号码格式不正确',
						icon:'none'
					})
					return;
				}
				_this.switch_key=true;
				ef.submit({
					request:{s:['APPLICATIONORDERSELFMERCHANTCREDITGIVEUSERCREDIT',[{
						merchant_id:_this.mch_id,//商家ID
						credit_number:_this.credit*100,//转账积分数量
						phone:_this.obj_phone,//要赠送的用户手机号
						comment:_this.info//备注信息
						}]]},
						callback:function(data){
							var fns_=fns.checkError(data,'s',function(errno,error){
								uni.showToast({
									title:error,
									icon:'none'
								})
								_this.switch_key=false;
							})
							console.log(fns_);
							if(fns_){
								uni.showToast({
									title:'赠送成功',
									icon:'success',
									success() {
										_this.switch_key=false;
										setTimeout(function(){
											uni.navigateBack({
												delta:1
											})
										},2500)
									}
								})
							}
						},
						error:function(err){
							uni.showToast({
								title: JSON.stringify(err),
								icon: 'none',
								success() {
									_this.switch_key=false;
								}
							})
						}
				})
				
			},
		},
	}
</script>

<style>
	.status-contents{
		height: var(--status-bar-height);
		background-color: #f4f3f3;
	}
	.top-view{
		width: 100%;
		position: fixed;
		top: 0;
	}
	.status{
		height:var(--status-bar-height);
	}
</style>

<style scoped lang="stylus" ref="stylesheet/stylus">
	.content
		width 100%
		// overflow hidden
		.title-box
			width 100%
			height 60px
			color #333
			font-size 18px
			line-height 60px
			background-color #f4f3f3
			.icon
				width 40%
		.buy-box
			width 100%
			height 400px
			background-color #fff
			.pay-method
				width 95%
				height 30%
				color #444444
				margin 0 auto
				font-size 14px
				display flex
				justify-content center   // 水平居中
				align-items center       // 垂直居中
				flex-direction column
				border-bottom 1px solid #ccc
				text-align left !important
				.num
					width 100%
					height 30%
					line-height 40px
					display block
					font-size 30upx
				.num_
					width 100%
					height 70%
					line-height 110px
					font-size 35upx
					display block
			.buy-count
				width 95%
				height 30%
				color #444444
				margin 0 auto
				font-size 14px
				display flex
				justify-content center   // 水平居中
				align-items center       // 垂直居中
				flex-direction column
				border-bottom 1px solid #ccc
				text-align left !important
				
				.num
					width 100%
					height 30%
					line-height 40px
					display block
					font-size 30upx
				.num_
					width 100%
					height 70%
					line-height 110px
					font-size 35upx
					display block
			.need-money
				width 95%
				height 30%
				margin 0 auto
				font-size 14px
				color #444444
				display flex
				justify-content center   // 水平居中
				align-items center       // 垂直居中
				flex-direction column
				border-bottom 1px solid #ccc
				text-align left !important
				.need
					width 100%
					height 30%
					line-height 40px
				.input-box
					width 100%
					height 70%
					line-height 110px
					font-size 28px
					display flex
					justify-content center   // 水平居中
					align-items center       // 垂直居中
					flex-direction row
					.symbol
						color #333
					input
						padding 10px 0
						padding-left 10px
			.more
				display block
				width 95%
				color #444444
				font-size 14px
				margin 0 auto
		.confirm-btn
			width 95%
			height 55px
			color #fff
			margin 0 auto
			display flex
			justify-content center   // 水平居中
			align-items center
			background-color #F8A0A0
			border-radius 4px

</style>
